<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
// import { NDataTable, NButton, NCard, NInput, NGrid, NGi, NGridItem, NFlex, NVirtualList, NDialogProvider, useDialog, createDiscreteApi, treeDark, NModal, NFormItem,NSpace } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter } from 'vue-router';

// const { dialog } = createDiscreteApi(["dialog"])



const contentBoxRef = ref(null)
const router = useRouter()
const menuRecord = useMenuRecordStore()

const siderList = ref([
    {
        id: 1,
        name: '工作'
    },
    {
        id: 2,
        name: '应用2'
    }, {
        id: 3,
        name: '应用3'
    },
    {
        id: 4,
        name: '应用4'
    }
])





const siderIndex = ref(0)
const siderTitle = ref('工作')



const avatars = [
    'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
    'https://avatars.githubusercontent.com/u/20943608?s=60&v=4',
    'https://avatars.githubusercontent.com/u/46394163?s=60&v=4',
    'https://avatars.githubusercontent.com/u/39197136?s=60&v=4',
    'https://avatars.githubusercontent.com/u/19239641?s=60&v=4'
]





// function suoxiao(params: type) {

//     router.replace({ path: '/' })



//     let currentRoute = router.currentRoute.value
//     let val = currentRoute.fullPath
//     let bol = menuRecord.menuList.includes(val)
//     if (bol) {

//     } else {
//         menuRecord.addMenu(currentRoute.fullPath)
//     }



// }
// const showModal = ref(false)
// const formValue = ref({})

// const rules = ref({
//     user: {
//         name: {
//             required: true,
//             message: '请输入姓名',
//             trigger: 'blur'
//         },
//         age: {
//             required: true,
//             message: '请输入年龄',
//             trigger: ['input', 'blur']
//         }
//     },
// })
// function jjj(params: any) {





// }

onMounted(() => {
    // 如果需要在组件挂载后立即获取宽度
    //   console.log(`盒子的宽度是：${contentBoxRef.value.offsetWidth}px`);

    let boxWidth: any = document.getElementById("contentBoxID");



    console.log(boxWidth.clientWidth);

    let num = boxWidth.clientWidth / 4
    console.log(num);
});
</script>
<template>
    <n-layout has-sider position="absolute" style="">
        <n-layout-sider has-sider bordered content-style="padding: 24px;">
            <n-h3 v-for="(i, n) in siderList" :key="n" style="cursor: pointer;padding: 5px;border-radius: 5px;"
                :style="{ backgroundColor: n == siderIndex ? 'rgba(180, 181, 181)' : '' }"
                @click="siderIndex = n, siderTitle = i.name">{{ i.name }}</n-h3>
        </n-layout-sider>
        <n-layout ref="contentBoxRef" id="contentBoxID" has-sider content-style="padding: 24px;">
            <n-card :title="siderTitle" :bordered="false">
                <n-space>
                    <div class="ul">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                    <div class="ul">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                    <div class="ul">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                    <div class="ul">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                    <div class="ul">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                </n-space>
                <!-- <div class="container">
                    <div class="left-column">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                    <div class="right-column">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>
                    </div>
                    <div class="left-column">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                    <div class="right-column">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>
                    </div>
                </div>
                <div class="container">
                    <div class="left-column">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>

                    </div>
                    <div class="right-column">
                        <div style="display: flex;align-items: center;">
                            <img src="https://avatars.githubusercontent.com/u/46394163?s=60&v=4" alt=""
                                style="width: 80px;height: 80px;border-radius: 10px;">
                            <span style="margin-left: 10px;">我是应用应用应用</span>
                        </div>
                        <n-button size="small" secondary strong>申请</n-button>
                    </div>
                </div> -->
            </n-card>
        </n-layout>
    </n-layout>
</template>

<style src="./index.scss" scoped></style>
<style lang="scss" scoped>
.light-green {
    height: 108px;
    min-width: 200px;
    background-color: rgba(0, 128, 0, 0.12);
}

.green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.24);
}


.ul {

    height: 100px;
    width: 379px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px rgb(198, 192, 192);
    // margin-bottom: 5px;
}







.container {
    display: flex;
}

.left-column {
    flex: 1;

    height: 100px;
    width: 370px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px rgb(198, 192, 192);
    // position: relative;
    /* for demonstration */
}

.right-column {
    flex: 1;

    height: 100px;
    width: 370px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px rgb(197, 191, 191);
    margin-left: 10px;
    /* for demonstration */
}

// @media only screen and (min-width: 800px) {
//     .left-column {width: 100px;}
// }

// @media only screen and (min-width: 1200px) {
//     .left-column {width: 300px;}
// }

// @media only screen and (min-width: 1080px) {
//     .left-column {width: 500px;}
// }</style>
